<template>
  <div v-if="visible" class="floating-panel">
    <span class="close-btn" role="button" aria-label="关闭" tabindex="0" @click="handleCancel" @keydown.enter="handleCancel">×</span>
    <div class="floating-panel__header">求解类型</div>
    <div class="floating-panel__body">
      <!-- 表单：选择求解类型 -->
      <el-form ref="formRef" :model="form" label-width="80px" size="small" class="solution-form">
        <el-form-item label="类型" prop="solveType">
          <el-select v-model="form.solveType" placeholder="请选择求解类型" filterable style="width:200px">
            <el-option v-for="opt in solveTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
          </el-select>
        </el-form-item>

        <!-- 新增字段：开始事件（s） -->
        <el-form-item label="开始时间" prop="startTime">
          <div style="display:flex; align-items:center; gap:8px">
            <el-input-number v-model.number="form.startTime" :min="0" :step="0.1" :precision="3" style="width:200px" />
            <span class="unit">s</span>
          </div>
        </el-form-item>

        <!-- 新增字段：最终时间（s） -->
        <el-form-item label="最终时间" prop="endTime">
          <div style="display:flex; align-items:center; gap:8px">
            <el-input-number v-model.number="form.endTime" :min="0" :step="0.1" :precision="3" style="width:200px" />
            <span class="unit">s</span>
          </div>
        </el-form-item>

        <!-- 新增字段：时间步长（s） -->
        <el-form-item label="时间步长" prop="timeStep">
          <div style="display:flex; align-items:center; gap:8px">
            <el-input-number v-model.number="form.timeStep" :min="0.001" :step="0.1" :precision="3" style="width:200px" />
            <span class="unit">s</span>
          </div>
        </el-form-item>

        <div class="form-actions">
          <el-button
            type="primary"
            size="small"
            :disabled="!form.solveType || form.endTime <= form.startTime || form.timeStep <= 0"
            @click="handleConfirm"
          >确认</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import type { ProjectTreeNode } from '@/store/modules/tree'
import { usePropertyForm } from '../composables/usePropertyForm'
// 事件：确认与取消（使用单一签名，避免联合调用报错）
const emit = defineEmits<{ (e:'cancel'|'confirm'):void }>()
// 父组件传入的节点与项目 id
const props = defineProps<{ node?: ProjectTreeNode | null; projectId?: number | string | null }>()
// 显示控制
const visible = ref(true)
function handleCancel(){ visible.value=false; emit('cancel') }
function handleKey(e:KeyboardEvent){ if(e.key==='Escape'&&visible.value){ handleCancel() } }
onMounted(()=>window.addEventListener('keydown',handleKey))
onBeforeUnmount(()=>window.removeEventListener('keydown',handleKey))
// 表单数据：新增 startTime、endTime、timeStep 并设置默认值
const form = reactive<{ solveType: string; startTime: number; endTime: number; timeStep: number }>(
  { solveType: 'static', startTime: 0, endTime: 1, timeStep: 0.1 }
)
// 求解类型选项（可根据业务再扩展）
const solveTypeOptions = [
  { label: '静力学', value: 'static' },
  { label: '瞬态动力学', value: 'transient' },
  { label: '模态分析', value: 'modal' },
  { label: '热分析', value: 'thermal' },
  { label: '耦合分析', value: 'coupled' }
]
// 使用通用保存逻辑：写入 node.property.solveType 并持久化
const { formRef, handleConfirm } = usePropertyForm(
  form,
  { node: props.node, projectId: props.projectId, persist: false, namespace: 'solution' },
  (e: 'confirm' | 'cancel') => emit(e)
)
</script>
<style scoped lang="scss">
@use './common.scss' as *;
.solution-form { display:flex; flex-direction:column; gap:8px; }
.form-actions { display:flex; justify-content:flex-end; }
</style>